<template>
	<view style="background-color: #f7f7f7;">
		<!-- 标题 -->
		<view class="title">
			<image src="../../../static/车联网服务-08我的-05我的车辆添加_slices/箭头.png" @click="back"></image>
			<view>我的车辆</view>
		</view>
		<!-- 暂无车辆 -->
		<view v-if="shuzu.length==0" class="body">
			<image src="../../../static/车联网服务-08我的-05我的车辆添加_slices/组 4.png"></image>
			<view>暂无车辆信息</view>
		</view>
		<!-- 有车辆 -->
		<view v-else class="car">
			<!-- 循环列表 -->
			<radio-group class="car1">
				<view class="body2" v-for="item,index in shuzu" :key="index">
					<view class="v1">
						<!-- <image :src="item.carPhoto"></image> -->
						<image src="/static/wddd/奔驰.jpg"></image>
						<view>
							<!-- <view>车型：{{item.model}}</view>
							<view class="v1.1">车牌：{{item.licensePlate}}</view> -->
							<view>车型：奔驰—GR</view>
							<view class="v1.1">车牌：豫M26558</view>
						</view>
					</view>
					<view class="v2">
						<label>
							<radio style="transform:scale(0.5);" color=" #ff4000;" :value="item.name"
								:checked="index===current"  @change="setCurrent(index)"/>设为默认车辆
						</label>
						<view @click="DeleteCar(item.id)">
							<text>删除</text>
						</view>
						
					</view>
				</view>
			</radio-group>
		</view>
		<view class="between"></view>
		<!-- 添加 -->
		<view class="bottom" @click="add">
			<button>
				<image src="../../../static/车联网服务-08我的-05我的车辆添加_slices/加号.png"></image>添加车辆
			</button>
		</view>
	</view>

</template>

<script>
import request from 'utils/api.js'
	export default {
		data() {
			return {
				shuzu: [],
				current: 0,
				id:null,
				name:null,
				phone:null
			}
		},
		methods: {
			async DeleteCar(id) {
			    console.log("当前删除的车辆 ID:", id);
			
			    try {
			      // 调用接口删除车辆
			      const res = await request({
			        url: `/car/deleteCar?id=${id}`,
			        method: 'DELETE',  // 确保接口为 DELETE 方法
			      });
			
				if (res === 1) {  // 判断返回的结果是 1
					// 如果删除成功，从 shuzu 数组中移除对应的车辆
					this.shuzu = this.shuzu.filter(item => item.id !== id);

					// 提示删除成功
					uni.showToast({
					  title: '删除成功',
					  icon: 'success',
					});
				
			        // 如果车辆列表为空，可以显示暂无车辆信息
			        if (this.shuzu.length === 0) {
			          uni.showToast({
			            title: '暂无车辆信息',
			            icon: 'none',
			          });
			        }
			      } else {
			        uni.showToast({
			          title: '删除失败',
			          icon: 'none',
			        });
			      }
			    } catch (error) {
			      console.error("删除失败:", error);
			      uni.showToast({
			        title: '删除失败，请稍后再试',
			        icon: 'none',
			      });
			    }
			  },
			add(){
				uni.navigateTo({
					// url:`/pages/tianjiacheliang/tianjiacheliang?id=${this.id}&name=${this.name}&tel=${this.phone}`,
					url:"/pacakgeMy/pages/myCarAdd/myCarAdd"
				})
			},
			//获取该用户车辆信息
			async CarList(){
				const res = await request({
					// url: `/car/carinfo?id=${this.id}`
				});
				this.shuzu = res;
			},
			 setCurrent(index) {
			    this.current = index;
			  },
			  remove(index) {
			    // 示例：从数组中删除指定车辆
			    this.shuzu.splice(index, 1);
			    // 如果删除的是当前选中项，重置 current
			    if (this.current === index) {
			      this.current = -1; // 或设置为其他默认值
			    }
			  },
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
		},
		onLoad(option){
			console.log(option.id);
			console.log(option.name);
			console.log(option.tel);
			this.id=option.id;
			this.name=option.name;
			this.phone=option.tel;
			this.CarList();
		},
	}
</script>

<style lang="scss">
	.title {
		background-image: url('../../../static/车联网服务-00首页_slices/图层 1.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;
		height: 300rpx;
		display: flex;
		padding: 60rpx 300rpx 40rpx 30rpx;
		justify-content: space-between;

		image {
			color: white;
			width: 35rpx;
			height: 35rpx;
		}

		view {
			color: white;
		}
	}

	.body {
		width: 82%;
		margin: -250rpx auto;
		border-radius: 20rpx;
		padding: 40rpx;
		background-color: #ffffff;
		height: 780rpx;
		padding-top: 180rpx;

		image {
			width: 540rpx;
			height: 370rpx;
			margin: 0 auto;
		}

		view {
			color: #dedede;
			margin-left: 210rpx;
			margin-top: -35rpx;
		}
	}
	.car{
		margin-top: -250rpx;
		margin-left: 50rpx;
		display: flex;
		padding-bottom: 200rpx; /* 增加底部间距 */
		align-items: center;
		.car1{
			width: 100%;
			align-items: center;
		}
	}
	.body2 {
		width: 82%;
		margin-bottom: 20rpx;
		border-radius: 20rpx;
		padding: 40rpx;
		background-color: #ffffff;
		
		image {
			border-radius: 50%;
			width: 100rpx;
			height: 100rpx;
		}

		view {
			margin-left: 15rpx;
		}

		.v1 {
			display: flex;
		}

		.v1-1 {
			margin-top: 15rpx;
			font-size: 27rpx;
		}

		.v2 {
			margin-top: 40rpx;
			border-top: 1rpx solid #f5f5f5;
			padding-top: 20rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 25rpx;

		}
	}
	.between{
		margin-bottom: 200rpx;
	}
	.bottom {
		position: fixed;
		bottom: 0;
		width: 90%;
		height: 90rpx;
		background-color: white;
		padding: 40rpx 50rpx 10rpx 50rpx;

		button {
			height: 68rpx !important;
			border-radius: 35rpx;
			background-color: #3789ff;
			color: white;
			line-height: 68rpx;
			font-size: 25rpx;

			image {
				width: 25rpx;
				height: 25rpx;
				margin-right: 20rpx;
			}
		}
	}
</style>